<script setup lang="ts">
import Audios from "@/utils/Audio";
const { active } = Audios;
interface Props {
  item: ChatFace;
}
const props = defineProps<Props>();

const times = computed(() => {
  if (!props.item.duration) return 0;
  return Math.ceil(props.item.duration / 1000);
});

const play = () => {
  const url =props.item.voice
   // "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3";
  Audios.play(url, props.item.id);
  //  Audios.play()
};
const getStyle = computed(() => {
  let bq = props.item.ismy ? "padding-left" : "padding-right";
  const size = times.value * 3 > 100 ? 100 : times.value * 3;
  const obj = {
    [bq]: size + "px",
  };

  return obj;
});
</script>

<template>
  <span class="text-box">
    <span
      :style="getStyle"
      class="voice-body"
      v-if="item.msgType === 2 "
      @click="play"
    >
      <span>{{ times }}"</span>
      <div
        class="wifi-box"
        :class="{
          left: item.ismy,
          active: active == item.id,
        }"
      >
        <div class="wifi-symbol">
          <div class="wifi-circle first"></div>
          <div class="wifi-circle second"></div>
          <div class="wifi-circle third"></div>
        </div>
      </div>
    </span>
    <ua-markdown
      v-else-if="item.msg && item.msg.includes('```')"
      :source="item.msg"
    />

    <span v-else>
      {{ item.msg }}
    </span>
  </span>
</template>

<style lang="scss" scoped>
.voice-body {
  display: flex;
  align-items: center;
}
@mixin getWidth($size) {
  width: $size;
  height: $size;
}

$size: 20px;
$color: #ccc;
.wifi-box {
  width: $size;
  height: $size;
  transform: translate(calc($size / 2), 0);
  &.left {
    transform: rotate(-180deg) translate(calc($size / 2), 0);
    .wifi-circle {
      border-color: #fff;
    }
  }
  &.active {
    .second,
    .third {
      animation: fadeInOut 1s infinite 0.2s;
    }
  }
}
.wifi-symbol {
  width: $size;
  height: $size;
  box-sizing: border-box;
  overflow: hidden;
  transform: rotate(135deg);
  .wifi-circle {
    border: calc($size / 10) solid $color;
    border-radius: 50%;
    position: absolute;
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
      opacity: 1; /*结尾状态 透明度为1*/
    }
  }
  .first {
    $fSize: calc($size / 10);
    width: $fSize;
    height: $fSize;
    background: $color;
    top: calc($size - $fSize);
    left: calc($size - $fSize);
  }

  .second {
    $sSize: calc($size / 2);
    width: $sSize;
    height: $sSize;
    top: calc($size / 1.45);
    left: calc($size / 1.45);
  }

  .third {
    $tSize: calc($size / 1.25);
    width: $tSize;
    height: $tSize;
    top: calc($size / 2);
    left: calc($size / 2);
    animation-delay: 0.4s;
  }
}
</style>
